vue中如何获取选中的checkbox的value值 |
您所在的位置:网站首页 › vue select获取选中的值 › vue中如何获取选中的checkbox的value值 |
通常情况下,我们可能会用v-for循环出一堆checkbox,提交数据的时候需要去获取选中的checkbox的value值,之前我的获取方式是给checkbox添加点击事件,这样确实能解决问题,但是总觉得有更好的办法,因为同为form表单元素的文本框就可以使用v-model来实现数据双向绑定,难道checkbox不能实现数据双向绑定吗? 呵呵哒,真的可以,我一直都不知道。。。。。。。。。 data () { return { checkFlag: true //checkbox默认选中 } } 上面是最简单的用法,那如果使用场景是:购物车里循环遍历了所有用户添加的商品,用户选中一些商品,去结算,我们需要在结算的时候获取所有选中的checkbox的value值; 页面的大概效果如下: view template data这里我们给checkbox绑上了v-model的属性,以及value属性,checkedArr是一个数组,用来放选中的item.name,当checkbox选中或者取消都会触发v-model绑定的checkedArr值变化; 强调最重要的一点,v-model会在checkbox选中的时候,自动将当前的value值push进数组;在取消checkbox的时候,自动将当前的value值pop出数组。 以下是依次选中四个商品,然后取消商品4,打印的checkedArr的值 view至于全选按钮什么时候选中,那我们可以watch一下checkedArr: watch |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |